<template>
  <div>
    <el-dialog
      title="编辑"
      :visible.sync="visible"
      width="60%"
      :before-close="handleClose"
    >
      <div class="form" style="width: 30%">
        <el-input v-model="form.brand" placeholder="请输入商品品牌"></el-input>
        <el-input v-model="form.price" placeholder="请输入商品单价"></el-input>
        <el-input
          v-model="form.shopnames"
          placeholder="请输入商品名称"
        ></el-input>
        <el-input v-model="form.types" placeholder="请输入商品类型"></el-input>
      </div>
      <div style="width: 100%; margin: 2vw auto">
        <el-upload
          ref="uploads"
          class="upload-demo"
          :action="action"
          multiple
          :data="data"
          name="files"
          :on-change="handleChange"
          :limit="3"
          :on-success="handleSuss"
          :file-list="fileList"
          :before-upload="handleBe"
          :on-remove="handleRemove"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" style="color: red" class="el-upload__tip">
            只能上传jpg/png文件，且不超过500kb
          </div>
        </el-upload>
        <div>
          <div id="editor" style="width: 100%"></div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </span>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import E from "wangeditor";
import { getShopDetails,updateShopes } from "@/api/shop";
export default {
  data() {
    return {
      id: "", //用于获取详情信息
      visible: false,
      action: "http://111.231.22.97:9002/uploadShop",
      // action:"http://127.0.0.1:9002/uploadShop",
      data: {
        filename: "", //上传文件名
      },
      editor: null,
      fileList: [], //展示图片
      form: {
        brand: "", //品牌
        price: "", //单价
        shopnames: "", //商品名称
        types: "", //商品类型
      },
    };
  },
  watch: {
    id(newV) {
      if (newV) {
        this.getData();
      }
    },
  },
  methods: {
    handleClose() {
      this.visible = false;
      this.editor.destroy()
    },
    getData() {
      let obj = {
        id: this.id,
      };
      let that = this;
      getShopDetails(obj).then((res) => {
        if (res.code == 200) {
          this.fileList = res.data.landImgList;
          this.form = Object.assign(this.form, res.data);
          this.createED(res);
        }
      });
    },
    handleChange(file) {
      console.log(file, "33333");
      this.data.filename = file.name.split(".")[0];
    },
    handleSuss(e) {
      this.fileList.push(e.data);
    },
    handleBe() {},
    handleRemove(file, fileList) {
      console.log(file, fileList);
      this.fileList = [];
      fileList.forEach((ele) => {
        let obj = {
          name: ele.name,
          url: ele.url,
        };
        this.fileList.push(obj);
      });
    },
    /* 提交 */
    submit() {
      if (
        this.form.brand != "" &&
        this.form.price != "" &&
        this.form.shopnames != "" &&
        this.form.types != "" &&
        this.editor.txt.html() != ""
      ) {
        let obj = {
          id: this.id,
          brand: this.form.brand,
          price: this.form.price,
          shopnames: this.form.shopnames,
          types: this.form.types,
          text: this.editor.txt.html(),
          imgs: this.fileList[0].url,
          imgurls: this.changeUrls(),
        };
        updateShopes(obj).then(res=>{
          console.log(res)
          if(res.code==200){
           this.$message.success("修改成功")
           this.visible=false
           this.editor.destroy()
          }
        })
      } else {
        this.$message.warning("请填写完整表单");
      }
    },
    /* 生成编辑器 */
    createED(res) {
      // console.log(document.querySelector("#editor"))
      const editor = new E("#editor");
      editor.disable(); //编辑器禁用
      editor.config.menus = [
        "|",
        "fontfamily",
        "fontsize",
        "head",
        "unorderlist",
        "orderlist",
        "alignleft",
        "aligncenter",
        "alignright",
        "|",
        "source",
        "|", // '|' 是菜单组的分割线
        "bold",
        "underline",
        "italic",
        "strikethrough",
        "eraser",
        "forecolor",
        "bgcolor",
      ];
      this.editor = editor;
      this.editor.create();
      /* 设置内容 */
      this.editor.txt.html(res.data.text)
    },
    changeUrls() {
      let str = "";
      let strs = ".jpg";
      this.fileList.forEach((ele, ind) => {
        if (ind != 0) {
          if (ele.name.indexOf(strs) == -1) {
            let index = ele.name + ".jpg" + "/";
            str+=index
          }
          else{
            let index = ele.name  + "/";
            str+=index
          }
        }
      });
      return str;
    },
  },
};
</script>

<style lang="scss" scoped>
.form .el-input {
  margin: 0 0 2%;
}
</style>